<!-- 引入公共部分 -->
{{extend './common/layout.html'}}
<!-- 引入css链接（填空） -->
{{block 'link'}}
<link rel="stylesheet" href="/static/home/css/productDetail.css">
{{/block}}

{{block 'main'}}
<header>
    {{include './common/header.html'}}
    {{include './common/headerNav.html'}}
    {{include './common/aside.html'}}
</header>
<div class="detailBody">
    <div class="detailInner">
        <div class="goodsBody">
            <div class="goodsSummary">
                <div class="goodsInfo">
                    <div class="goodsInfoImg">
                        <div class="goodsInfoItem">
                            <div class="goodsInfoItemMain">
                                <!-- <a href=""> -->
                                <div class="smallImg">
                                    <img src="" alt="">
                                    <!-- 放大图片 -->
                                    <!-- <span></span> -->
                                <!-- </a> -->
                                </div>
                                <div class="bigImg">
                                    <!-- <img src="/static/home/image/clothes.jpg" alt=""> -->
                                </div>
                                <span class="float"></span>
                            </div>
                            <ul class="goodsInfoItemMinor">
                                <!-- <li>
                                        <img class="minorPic minorPicBorder" src="/static/home/image/clothes.jpg" alt="">
                                    
                                </li>
                                <li>
                                        <img class="minorPic" src="http://localhost:3000/static/home/image/clothes1.jpg" alt="">
                                    
                                </li>
                                <li>
                                        <img class="minorPic" src="/static/home/image/clothes.jpg" alt="">
                                    
                                </li>
                                <li>
                                        <img class="minorPic" src="/static/home/image/clothes1.jpg" alt="">
                                   
                                </li>
                                <li>
                                        <img class="minorPic" src="/static/home/image/clothes.jpg" alt="">
                                    
                                </li> -->
                                <div style="clear: both;"></div>
                            </ul>
                        </div>
                        <div class="goodsInfoCollect">
                            <span class="collectIcon"><i class="iconfont xingxing1" style="cursor: pointer;" collectFlag></i></span>
                            <span class="collectWord">收藏宝贝</span>
                        </div>
                    </div>
                    <div class="goodsInfoDetail">
                        <div class="goodsInfoCon">
                            <div class="goodsInfoSpe">
                                <div class="goodsInfoTitle">
                                    <h3>
                                        <!-- 深蓝色卫衣女加绒秋冬2021新款慵懒风套头上衣宽松韩版连帽外套厚 -->
                                    </h3>
                                </div>
                                <ul class="goodsInfoMeta">
                                    <li id="goodsInfoPrice">
                                        <span class="typeCom">价格</span>
                                        <div class="goodsTangile" style="text-decoration: line-through;">
                                            <strong>
                                                <span>￥</span>
                                                <!-- 动态 -->
                                                <span>178.00</span>
                                            </strong>
                                        </div>
                                    </li>
                                    <li id="goodsInfoLG">
                                        <span class="typeCom">零购价</span>
                                        <div class="goodsTangile">
                                            <span>￥</span>
                                                <!-- 动态 -->
                                            <span class="goodsPriceReal"></span>
                                        </div>
                                    </li>
                                    <li id="goodsInfoAct">
                                        <span class="typeCom">活动价</span>
                                        <div class="goodsTangile">
                                            <span>￥</span>
                                            <!-- 动态 -->
                                            <span class="goodsPriceReal"></span>
                                        </div>
                                    </li>
                                    <li id="goodsInfoDis">
                                        <span class="typeCom">优惠</span>
                                        <div class="goodsTangile">

                                        </div>
                                    </li>
                                    <li id="LgCounter">
                                        <div class="LgCounterInner">
                                            <div class="counterLeft">
                                                <!-- 该处可一键到评论 -->
                                                <strong></strong>
                                                <span>累计评论</span>
                                            </div>
                                            <div class="counterRight">
                                                <strong></strong>
                                                <span>交易成功</span>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                <div class="delivery">
                                    <div class="deliveryCtn">
                                        <span class="deliveryCtnIcon">配送</span>
                                    </div>
                                </div>
                                <!-- 动态 -->
                                <!-- 尺码颜色数量 -->
                                <div class="changeGoods">
                                    <div class="changeGoodsCtn">
                                        <dl class="sizeDl">
                                            <dt>尺码</dt>
                                            <dd>
                                                <ul class="sizeUl">
                                                    <li>S</li>
                                                    <li>M</li>
                                                    <li>L</li>
                                                    <li>XL</li>
                                                </ul>
                                            </dd>
                                        </dl>
                                        <dl class="colorDl">
                                            <dt>颜色</dt>
                                            <dd>
                                                <ul class="colorClassifyUl">
                                                    <li class="colorClassify">深蓝色/加绒</li>
                                                    <li>黑色/加绒</li>
                                                    <li>深蓝色/不加绒</li>
                                                    <li>黑色/不加绒</li>
                                                    <li>黑色/不加绒</li>
                                                    <li>黑色/不加绒</li>
                                                    <li>黑色/不加绒</li>
                                                </ul>
                                            </dd>
                                        </dl>
                                        <dl>
                                            <dt>数量</dt>
                                            <dd>
                                               <span>
                                                   <button class="accountRecede accountCommon"><i class="iconfont jianhao"></i></button>
                                                   <input type="text" value="1" class="accountInput" disabled>
                                                   <button class="accountAdd"><i class="iconfont jiahao11"></i></button>
                                               </span>
                                            </dd>
                                        </dl>
                                        <div class="BuyOrAdd">
                                            {{if userInfoL.flagLogin == 0}}
                                            <div class="purchase">
                                                <a href="/home/login" style="text-decoration: none; color: #E5511D;">立即购买</a> 
                                            </div>
                                            <div class="addShoppingCart">
                                                <a href="/home/login" style="text-decoration: none; color: white;">加入购物车</a> 
                                            </div>
                                            {{else if userInfoL.flagLogin == 1}}
                                            <div class="purchase" >
                                                立即购买
                                            </div>
                                            <div class="addShoppingCart" onclick="addCartFun()">
                                                加入购物车
                                            </div>
                                            {{/if}}
                                            <div style="clear: both;"></div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div style="clear: both;"></div>
                </div>
            </div>
            <div class="shopSummary">
                <div class="shopInfo">
                    <div class="shopTitle">
                        卖家店铺
                    </div>
                    <div class="shopInfoWrap">
                        <div class="shopInfoWrapHd">
                            <!-- 动态添加 -->
                            <div class="hdShopName">
                                <a href="javascript:;" title="yoyo小柒家"></a>
                                
                            </div>
                            <div class="hdShopKeeper">
                                <dl>
                                    <dt>掌柜：</dt>
                                    <dd><a href="javascript:;" title=""></a></dd>
                                </dl>
                            </div>
                            <div class="hdShopContact">
                                <dl>
                                    <dt>联系:</dt>
                                    <dd></dd>
                                </dl>
                            </div>
                        </div>
                        <!-- 店铺的描述评分 -->
                        <div class="shopInfoWrapBd">
                            <!-- 动态 -->
                            <div class="shopInfoWrapRate">
                                <dl>
                                    <dt>描述</dt>
                                    <dd class="rateEqual">
                                        <a href="javascript:;" title="计算规则:(同行业平均分-店铺得分)/(同行业平均分-同行业店铺最低得分)">4.8</a>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>服务</dt>
                                    <dd class="rateEqual">
                                        <a href="javascript:;" title="计算规则:(同行业平均分-店铺得分)/(同行业平均分-同行业店铺最低得分)">4.8</a>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>物流</dt>
                                    <dd class="rateEqual">
                                        <a href="javascript:;" title="计算规则:(同行业平均分-店铺得分)/(同行业平均分-同行业店铺最低得分)">4.8</a>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                        <div class="shopInfoWrapFt">
                            <a href="javascript:;" target="_blank" class="goShop">进入店铺</a>
                            <a href="javascript:;" class="collectShop">收藏店铺</a>
                            <div style="clear: both;"></div>
                        </div>
                    </div>
                </div>
                <!-- 搜索本店 -->
                <div class="searchThisShop">
                    <div class="searchShop">
                        <p class="searchShopP">搜本店</p>
                        <div class="searchInputBox">
                            <input type="text">
                            <!-- <button></button> -->
                        </div>
                        <div class="searchInputBtn">
                            <!-- <button></button> -->
                            <i class="iconfont iconfontzhizuobiaozhun023131"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div style="clear: both;"></div>
        </div>
    </div>
    <div class="variousInfo">
        <div class="variousDetail">
            <div class="innerWrap">
                <ul class="innerNav">
                    <li class="goodsDetails selected">宝贝详情</li>
                    <li class="commend">累计评论</li>
                    <!-- <li class="service">专项服务</li> -->
                    <div style="clear: both;"></div>
                    <!-- <li></li> -->
                </ul>
            </div>
            <!-- 宝贝详情 -->
            <div class="innerWrapSer">
                <div class="innerWrapShow">
                    <div class="innerWrapTop">
                        <ul class="topList">
                            <li>使用年龄:&nbsp;18-24周岁</li>
                            <li>使用年龄:&nbsp;18-24周岁</li>
                            <li>使用年龄:&nbsp;18-24周岁</li>
                            <li>使用年龄:&nbsp;18-24周岁</li>
                            <li>使用年龄:&nbsp;18-24周岁</li>
                            <li>使用年龄:&nbsp;18-24周岁</li>
                            <li>使用年龄:&nbsp;18-24周岁和此外吃啊好地方</li>
                            <li>使用年龄:&nbsp;18-24周岁</li>
                            <li>使用年龄:&nbsp;18-24周岁</li>
                            <li>使用年龄:&nbsp;18-24周岁</li><li>使用年龄:&nbsp;18-24周岁</li>
                            <li>使用年龄:&nbsp;18-24周岁</li>
                            <li>使用年龄:&nbsp;18-24周岁</li>
                            <div style="clear: both;"></div>
                        </ul>
                    </div>
                    <div class="description">
                        <p>
                           <!-- <img src="/static/home/image/clothes.jpg" alt="">
                           <img src="/static/home/image/clothes1.jpg" alt="">
                           <img src="/static/home/image/clothes.jpg" alt="">
                           <img src="/static/home/image/clothes.jpg" alt="">
                           <img src="/static/home/image/clothes1.jpg" alt="">
                           <img src="/static/home/image/clothes.jpg" alt="">
                           <img src="/static/home/image/clothes1.jpg" alt="">
                           <img src="/static/home/image/clothes.jpg" alt="">
                           <img src="/static/home/image/clothes1.jpg" alt="">  -->
                        </p>
                    </div>
                </div>
            </div>
            <!-- 累计评论 -->
            <div class="innerWrapCommend">
                <div class="innerWrapCommendShow">
                    <ul class="innerCommendNav">
                        <li>宝贝评论</li>
                    </ul>
                    <div class="innerCommendMain">
                        <div class="innerCommendMainNav">
                            <ul class="commendMainNavList">
                                <li> <label for=""><input type="radio">全部</label> </li>
                                <li> <label for=""><input type="radio">好评</label> </li>
                                <li> <label for=""><input type="radio">中评</label> </li>
                                <li> <label for=""><input type="radio">差评</label> </li>
                                <div style="clear: both;"></div>
                            </ul>
                        </div>
                        <!-- 发表评论判断是否登录 -->
                        <div class="innerCommendMainDetail">
                            <ul class="commentUl">
                                <!-- <li>
                                    <div class="commendFormHead">
                                            <i class="iconfont morentouxiang3" style="font-size: 30px;"></i>
                                        <div>莹***9(匿名)</div>
                                    </div>
                                    <div class="commendFormInfo">
                                        <div class="commendFormInfoItem">
                                            <div class="commendFormInfoContent">
          衣服是加厚的 内里有加薄绒 穿到10几度应该没问题 可以穿到120斤左右 面料是羊羔毛 黑色会有点粘毛 不会掉毛 个人觉得性价比不错 做工精细 值得入手！
                                            </div>
                                            <div class="commendFormInfoImg">
                                                <ul>
                                                    <li><img src="/static/home/image/clothes.jpg" alt=""></li>
                                                    <li><img src="/static/home/image/clothes.jpg" alt=""></li>
                                                    <li><img src="/static/home/image/clothes.jpg" alt=""></li>
                                                    <li><img src="/static/home/image/clothes.jpg" alt=""></li>
                                                    <li><img src="/static/home/image/clothes.jpg" alt=""></li>
                                                    <div style="clear: both;"></div>
                                                </ul>
                                            </div>
                                            <div class="commendFormInfoTime">
                                                <div class="infoTimeContent">
                                                    <span style="margin-right: 15px;">2021年11月05日 20:50</span>
                                                    颜色分类：黑色（夹棉加厚&nbsp;&nbsp;尺码：均码
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="clear: both;"></div>
                                </li> -->
                            </ul>
                            <!-- 评论的分页 -->
                            <div class="commendPaging">
                                <ul>
                                    <li class="pagePrev">上一页</li>
                                    <li>1</li>
                                    <li class="pageNext">下一页</li>
                                    <!-- <div style="clear: both;"></div> -->
                                </ul>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 价格说明 -->
            <div class="innerInfoPriceSepc">
                <h3>价格说明</h3>
                <p class="innerTitle">划线价格</p>
                <p class="innerInfoDescribe">指商品的专柜价、吊牌价、正品零售价、厂商指导价或该商品的曾经展示过的销售价等，<strong>并非原价</strong>，仅供参考。</p>
                <p class="innerTitle">未划线价格</p>
                <p class="innerInfoDescribe">指商品的<strong>实时标价</strong>，不因表述的差异改变性质。具体成交价格根据商品参加活动，或会员使用优惠券、积分等发生变化，最终以订单结算页价格为准。</p>
                <p class="innerInfoDescribe">商家详情页（含主图）以图片或文字形式标注的一口价、促销价、优惠价等价格可能是在使用优惠券、满减或特定优惠活动和时段等情形下的价格，具体请以结算页面的标价、优惠条件或活动规则为准。</p>
                <p class="innerInfoDescribe">此说明仅当出现价格比较时有效，具体请参见《淘宝价格发布规范》。若商家单独对划线价格进行说明的，以商家的表述为准。</p>
            </div>
            <!-- 内容声明 -->
            <div class="innerWrapState">
                <div class="officalRemind">
                    <span class="remindTitle">内容声明:</span>
                    <span class="remindCon">
                        零元购为第三方交易平台及互联网信息服务提供者，零元购（含网站、客户端等）所展示的商品/服务的标题、价格、详情等信息内容系由店铺经营者发布，其真实性、准确性和合法性均由店铺经营者负责。零元购提醒用户购买商品/服务前注意谨慎核实。如用户对商品/服务的标题、价格、详情等任何信息有任何疑问的，请在购买前通过阿里旺旺与店铺经营者沟通确认；零元购存在海量店铺，如用户发现店铺内有任何违法/侵权信息，请立即向零元购举报并提供有效线索。
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 弹窗 -->
<div class="popBox">
    <div class="pop">
        <div class="popInner">
            <span class="deleteIcon"><i class="iconfont shibai" style="font-size: 20px;"></i></span>
            <div class="deleteGood">
                <!-- 删除宝贝 -->
            </div>
            <div class="deleteGoodsInner">
                <!-- 删除的宝贝将可能会被别人抢走哦~确定要删除吗？ -->
            </div>
            <div class="deleteBtn">
                <button class="noDelete">
                    取消
                </button>
                <button class="sureDelete">
                    确定
                </button>
            </div>
        </div>
    </div>
</div>
<footer>
    {{include './common/footer.html'}}
</footer>
{{block 'script'}}
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<script src="/static/home/js/productDetail.js"></script>
{{/block}}

{{/block}}

